<template>
  <view class="vip-control">
    <my-header title="会员中心"></my-header>
    <my-content class="content" :default-padding-top="10">
      <view class="header">
        <view class="top">
          <view class="avatar-bg">
            <image :src="userData.avatar" class="avatar"></image>
          </view>
          <view class="right">
            <!-- <view class="right_item">
              <view class="nickname">{{ userData.nickname }}</view>
              <view class="sign action" v-if="userData.vip_sign_status == 0">升级后签到</view>
              <view @click="vipSign()" class="sign" v-if="userData.vip_sign_status == 1">签到领虎币</view>
              <view class="sign action" v-if="userData.vip_sign_status == 2">今日已签到</view>
            </view> -->
            <view class="right_item">
              <view class="level">VIP{{ userData.level_id }}</view>
            </view>
          </view>
        </view>

        <view class="bottom">
          <view style="width: 100%">
            <liu-progressbar
              textInside
              bgColor="#DED000"
              :progress="userData.level_rate"
              dsColor="#080808"
              :height="'16rpx'"
            />
          </view>

          <!-- <view class="rate_box">
            
          </view> -->
          <view class="rate_bottom">
            <view class="rate_bottom_info">
              <!-- <view style="color: #808080">{{ userData.level_info }}</view> -->
              <view style="color: #ded000">{{ userData.ext_info }}</view>
            </view>
            <view>
              <view class="rate_text" style="color: #808080">
                <text style="color: #ded000">{{ userData.grow_value }}</text>
                /{{ userData.total_pay }}
              </view>
              <!-- <view class="action" @click="header('/pages/user/user_level_log')">五日流水</view> -->
            </view>
          </view>
        </view>
      </view>
      <view class="level_box">
        <view class="level_header">
          <view>VIP0-VIP10各等级奖励</view>
          <view class="level_header_rule" @click="getContent">
            会员规则
            <image
              src="https://www.dingxians.cn/images/user/question-item.png"
              style="width: 22rpx; height: 22rpx; margin-left: 10rpx"
              mode="scaleToFill"
            />
          </view>
        </view>

        <view class="level_content">
          <view class="level_thead">
            <view class="level_thead_item">等级</view>
            <view class="level_thead_item">所需成长值</view>
            <view class="level_thead_item">达标流水</view>
            <view class="level_thead_item">获得虎币</view>
          </view>
          <view class="level_th">
            <view
              class="level_tr"
              v-for="(item, index) in userLevelData"
              :key="index"
              :style="{ backgroundColor: index % 2 !== 0 ? 'black' : '' }"
            >
              <view class="level_td" style="border-right: 1px solid #080808">
                <view class="vip">VIP{{ item.level_id }}</view>
              </view>
              <view class="level_td" style="border-right: 1px solid #080808">{{ item.total_pay }}</view>
              <view class="level_td" style="border-right: 1px solid #080808">{{ item.lower_standard }}</view>
              <view class="level_td">{{ item.daily_value }}</view>
            </view>
          </view>
        </view>
      </view>
    </my-content>

    <!-- 会员规则弹窗 -->
    <view class="vip-rule-dialog" v-if="isShowVipRule">
      <view class="dialog-content">
        <view class="dialog-header">
          <view class="dialog-header-title">会员规则</view>
          <image @click="isShowVipRule = false" class="close-btn" src="https://www.dingxians.cn/images/shop/close-btn.png" mode="scaleToFill" />
        </view>
        <scroll-view scroll-y class="dialog-scroll-view">
          <rich-text :nodes="privacyData" class="privacy"></rich-text>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      userData: {
        id: '',
        nickname: '',
        avatar: 'https://www.dingxians.cn/upload/user_static/user/avatar.png',
        balance: 0,
        point: 0,
        level_id: 0,
        commission: 0,
        messageCount: 0,
        lower_standard: 0,
        five_total_pay: 0,
        level_info: '',
        ext_info: '',
        grow_value: 0,
        total_pay: 0,
      },
      userLevelData: [],
      loading: false,
      privacyData: '',
      isShowVipRule: false,
    }
  },
  onLoad() {
    this.getUser()
    this.getUserLevel()
  },
  onShow() {
    this.userData.nickname = uni.getStorageSync('nickname')
    this.userData.avatar = uni.getStorageSync('avatar')
    this.userData.id = uni.getStorageSync('user_id')
  },

  methods: {
    getContent() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.contents
        .show('vip_rule')
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.privacyData = res.data.content
            this.isShowVipRule = true
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    vipSign() {
      this.userData.vip_sign_status = 2
      api.userVipSigns
        .store()
        .then((res) => {
          if (res.code === 200) {
            this.show('签到成功')
            this.getUser()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.users
        .show()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.userData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUserLevel() {
      this.loading = true
      uni.showLoading({
        title: '数据加载中',
      })
      api.userLevels
        .index()
        .then((res) => {
          this.loading = false
          uni.hideLoading()
          if (res.code === 200) {
            this.userLevelData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.vip-control {
  background: #141414;
  height: 100%;
  min-height: 100vh;
}
.content {
  background: #141414;
  height: 100%;
  min-height: 100vh;
  .header {
    display: flex;
    flex-direction: column;
    border-radius: 10rpx;
    padding: 50rpx 0;
    background-image: url('https://www.dingxians.cn/upload/user_static/user/vip-bg.png');
    background-size: 100% 100%;
    width: 702rpx;
    margin: 20rpx auto 0;
    color: white;
    .top {
      display: flex;
      align-items: center;
      width: 622rpx;
      margin: 0 auto 15rpx auto;
      .avatar-bg {
        width: 145rpx;
        height: 145rpx;
        background-image: url('https://www.dingxians.cn/upload/user_static/common/icon-border.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .avatar {
          width: 108rpx;
          height: 108rpx;
          border-radius: 50%;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100rpx;
        justify-content: space-between;
        margin-left: 20rpx;
        .right_item {
          display: flex;
          justify-content: space-between;
          .level {
            color: #663409;
            font-weight: bold;
            font-size: 18rpx;
            width: 84rpx;
            height: 32rpx;
            line-height: 32rpx;
            box-sizing: border-box;
            padding-left: 38rpx;
            background-image: url('https://www.dingxians.cn/upload/user_static/user/vip-level.png');
            background-size: 100% 100%;
          }
          .sign {
            font-size: 22rpx;
            width: 126rpx;
            height: 38rpx;
            line-height: 38rpx;
            /* border-radius: 30rpx; */
            text-align: center;
            background-color: #ded000;
            color: #000;
            &.action {
              background-color: #262626;
              color: #fff;
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      width: 606rpx;
      margin: 0 auto;
      font-size: 24rpx;
      color: #a36c11;

      .rate_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 10rpx;
        margin-bottom: 20rpx;
      }
      .rate_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15rpx;

        .rate_bottom_info {
          display: flex;
          flex-direction: column;
        }
        .action {
          margin-top: 3rpx;
          font-size: 22rpx;
          height: 38rpx;
          line-height: 38rpx;
          /* border-radius: 30rpx; */
          text-align: center;
          color: #ded000;
          border: 1rpx solid #ded000;
          // background-color: #eaca97;
        }
      }
    }
  }
  .level_box {
    position: relative;
    display: flex;
    flex-direction: column;
    /* background-color: #ffe4b5; */
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    box-shadow: inset 10px 10px 10px 10px rgba(255, 193, 24, 0.1), inset -10px -10px 10px 10px rgba(255, 193, 24, 0.1);
    margin: 20rpx;
    box-sizing: border-box;
    color: white;
    padding: 20rpx;

    /* &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #ffe4b5;
    } */
    .level_header {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      // background-color: #fff;
      font-size: 28rpx;
      padding: 20rpx;
      .level_header_rule {
        font-size: 24rpx;
      }
    }
    .level_content {
      /* background-color: #ffe4b5; */
      display: flex;
      flex-direction: column;
      .level_thead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        /* border-bottom: 1rpx solid #ccc;
        border-top: 1rpx solid #ccc; */
        height: 80rpx;
        background-color: #080808;
        .level_thead_item {
          flex: 1;
          display: flex;
          justify-content: center;
          height: 80rpx;
          line-height: 80rpx;
          /* border-right: 1rpx solid #ccc; */
        }
      }

      .level_th {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        .level_tr {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60rpx;
          /* border-bottom: 1rpx solid #ccc; */
          .level_td {
            flex: 1;
            height: 60rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border-right: 1rpx solid #ccc; */

            .vip {
              box-sizing: border-box;
              width: 84rpx;
              height: 32rpx;
              font-size: 18rpx;
              color: #663409;
              line-height: 32rpx;
              padding-left: 35rpx;

              background-image: url('https://www.dingxians.cn/upload/user_static/user/vip-level.png');
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
}

.vip-rule-dialog {
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);

  .dialog-content {
    width: 654rpx;
    height: 1100rpx;
    background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-vip-rule.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    .dialog-header {
      position: relative;
      .dialog-header-title {
        margin-top: 34rpx;
        font-size: 44rpx;
        text-align: center;
        color: #dedede;
        font-family: 'youshe';
        text-shadow: 0px 0px 12px #ded000;
      }

      .close-btn {
        position: absolute;
        top: -20rpx;
        right: 20rpx;
        width: 64rpx;
        height: 64rpx;
      }
    }

    .dialog-scroll-view {
      flex: 1;
      overflow: hidden;
      color: #DEDEDE;
      font-size: 26rpx;
      padding: 30rpx 40rpx;
      box-sizing: border-box;
    }
  }
}
</style>
